import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView} from '@tarojs/components'
import './index.less'
import {AtSearchBar} from 'taro-ui'
var timer_set;

@connect(({businessList, businessDetail, loading}) => ({
  businessList,
  businessDetail,
  loading
}))

export default class ProductList extends Component {


  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const { businessList, dispatch } = this.props;
    const { navName, loadUrl} = businessList;
    // 数据初始化
    wx.setNavigationBarTitle({
      title: navName
    })
    dispatch({type: `businessList/${loadUrl}`})
    // dispatch({type: 'businessList/loadDistrict'})
  }

  choseListData(item) {
    const {dispatch, businessList} = this.props;
    dispatch({ type: 'businessDetail/initData' })
    dispatch({
      type: 'businessDetail/updateState',
      payload: {
        id: item.id,
        loadUrl: businessList.urlData
      }
    })
    Taro.navigateTo({
      url: `/pages/businessDetail/index`
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  getData(e) {
    const t = this;
    const {dispatch} = t.props;
    dispatch({
      type: 'businessList/updateState',
      payload: {
        nameLike: e
      }
    })
		if(timer_set){
			clearTimeout(timer_set)
    }
    timer_set = setTimeout( () => {
      dispatch({
        type: 'businessList/updateState',
        payload: {
          offset: 0,
          total: 0, // 总数
          listData: [], // 列表数据
        }
      })
			dispatch({
        type: 'businessList/loadProductData',
        payload: {
          offset: 0,
          total: 0, // 总数
          listData: [], // 列表数据
          nameLike: e,
        }
      })
    }, 500)
  }

  // 下拉滚动
  onScrollToLower(e) {
    const {
      dispatch, businessList
    } = this.props;
    dispatch({
      type: `businessList/${businessList.loadUrl}`,
    })
    dispatch({
      type: 'businessList/updateState',
    })
  }

  render() {
    const {
      businessList, dispatch
    } = this.props;
    const {current} = this.state;

    const {
      listData, districtTypeRange, loadUrl, nameLike
    } = businessList;
    const updateState = (obj) => {
      dispatch({
        type: 'businessList/updateState',
        payload: {
          ...obj
        }
      })
    }

    return (

      <View className='productList'>
        <View className='scheduleNear'>
          {/* <View className='pick'>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={districtTypeRange} rangeKey="name"
                        onChange={(e) => {
                          updateState({
                            districtType: districtTypeRange[e.detail.value],
                            limit: 8,
                            offset: 0,
                            total: 0, // 总数
                            listData: [], // 列表数据
                          })
                          dispatch({type: `businessList/${loadUrl}`})
                        }}
                >
                  <AtListItem
                    arrow='right'
                    title='区域'
                  />
                </Picker>
              </AtList>
            </View>
          </View> */}
          <View className='choseList'>
            <View className='search'>
              <AtSearchBar
                placeholder='搜索更多'
                actionName='取消'
                value={nameLike}
                onChange={this.getData.bind(this)}
                onActionClick={() => {
                  updateState({
                    offset: 0,
                    total: 0, // 总数
                    listData: [], // 列表数据
                  })
                  dispatch({
                    type: 'businessList/loadProductData',
                    payload: {
                      offset: 0,
                      total: 0, // 总数
                      listData: [], // 列表数据
                      nameLike: e,
                    }
                  })
                }}
              />
            </View>
          </View>
          <View className='firstList'>
            <ScrollView
              scrollY
              onScrollToLower={this.onScrollToLower.bind(this)}
              style="height:100%"
            >
              {
                listData.map((item, i) => <View className='listChild' key={i}
                                                onClick={this.choseListData.bind(this, item)}
                >
                  <View className='box_left'>
                    <image src={item.topImage.split(',http')[0]}/>
                  </View>
                  <View className='box_right'>
                    <View className='adsName'>
                      标题：{item.title||''}
                    </View>
                    <View className='adsName'>
                      地址： {item.districtName||'暂无'}
                    </View>
                    <View className='detailAds'>
                      截止时间： {item.endDate||''}
                    </View>
                  </View>
                </View>)
              }
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }
}
